.base {
  position: fixed;
  max-height: 90vh;

  /* biome-ignore lint/suspicious/noDuplicateProperties: Browser compatibility */
  max-height: 90dvh;
  background-color: var(--cui-bg-elevated);
}

.content {
  max-height: 90vh;

  /* biome-ignore lint/suspicious/noDuplicateProperties: Browser compatibility */
  max-height: 90dvh;
  overflow-y: auto;
}

@media (min-width: 480px) {
  .base {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-width: 480px;
    max-width: 50vw;
    border-radius: var(--cui-border-radius-mega);
  }

  .base .content {
    padding: var(--cui-spacings-giga);
    padding-bottom: calc(
      env(safe-area-inset-bottom) +
      var(--cui-spacings-giga)
    );
  }
}

@media (max-width: 479px) {
  .base {
    top: unset;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    border-radius: var(--cui-border-radius-mega) var(--cui-border-radius-mega) 0
      0;
  }

  .base .content {
    padding: var(--cui-spacings-mega);
    padding-bottom: calc(
      env(safe-area-inset-bottom) +
      var(--cui-spacings-mega)
    );
    -webkit-overflow-scrolling: touch;
  }

  .immersive {
    height: 100%;
    max-height: unset;
    border: none;
    border-radius: unset;
  }

  .immersive .content {
    max-height: unset;
  }
}
